<!--
 * @Author: wwj 3342930399@qq.com
 * @Date: 2024-03-07 17:57:16
 * @LastEditors: wwj 3342930399@qq.com
 * @LastEditTime: 2024-03-24 20:19:58
 * @FilePath: \vue\src\views\Message\sutdent.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="invigilate">
    <div class="table">
      <div class="header">
        <a-form layout="inline" :form="form">
          <a-form-item label="学生姓名">
            <a-input v-model="form.student_name" placeholder="请输入学生姓名">
            </a-input>
          </a-form-item>
          <a-form-item label="老师姓名">
            <a-input v-model="form.teacher_name" placeholder="请输入老师姓名">
            </a-input>
          </a-form-item>
          <a-form-item label="班级">
            <a-select
              style="width: 150px"
              v-model="form.class_id"
              placeholder="请选择学生班级"
            >
              <a-select-option
                v-for="(item, index) in classList"
                :key="index"
                :value="item.value"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="年级">
            <a-select
              style="width: 150px"
              v-model="form.grade_id"
              placeholder="请选择学生年级"
            >
              <a-select-option
                v-for="(item, index) in gradeList"
                :key="index"
                :value="item.value"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="btn">
          <a-button type="primary" @click="handleSubmit"> 确定 </a-button>
          <a-button @click="handleClear"> 清除 </a-button>
        </div>
      </div>
      <div class="operate">
        <a-button type="primary"> 新增 </a-button>
        <a-button type="primary" @click="handleExport"> 导出 </a-button>
      </div>
      <div class="body">
        <vxe-table
          ref="baseTable"
          :columns="columns"
          :datalist="datalist"
          :pagination="pagination"
          :pageChange="pageChange"
          :checkboxFun="checkBox"
        >
          <template #action="{ scope }">
            <a-button type="link" size="small" @click="handleEdit(scope)">
              编辑
            </a-button>
          </template>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
import vxeTable from "../../components/vxeTable.vue";
import {
  apiStudentList,
  apiStudentListPage,
  apiGetClassList,
  apiGetGradeList,
} from "../../api/score";

export default {
  components: { vxeTable },
  data() {
    return {
      classList: [],
      gradeList: [],
      columns: [
        { type: "checkbox", width: "5%" },
        { type: "seq", width: "5%", align: "center", title: "序号" },
        {
          field: "student_name",
          title: "学生姓名",
          width: "10%",
          align: "center",
        },
        {
          field: "course_name",
          title: "课程",
          width: "10%",
          align: "center",
        },
        {
          field: "score",
          title: "成绩",
          width: "10%",
          align: "center",
        },
        {
          field: "grade_name",
          title: "年级",
          width: "10%",
          align: "center",
        },
        {
          field: "class_name",
          title: "班级",
          width: "10%",
          align: "center",
        },
        {
          field: "teacher_name",
          title: "任课老师",
          width: "15%",
          align: "center",
        },
        {
          field: "remark",
          title: "备注",
          width: "15%",
          align: "center",
        },
        {
          title: "操作",
          width: "10%",
          align: "center",
          slots: { default: "action" },
        },
      ],
      datalist: [
        {
          teacher: "三月七",
          course: "语文",
          grade: "1年级",
          class: "1班",
          week: "星期一",
          startTime: "9:00",
          endTime: "10:45",
        },
      ],
      pagination: {
        falg: true,
        pageSize: 10,
        total: 0,
        currentPage: 1,
      },
      checkList: [],
      form: {
        teacher_name: "",
        class_name: "",
        student_name: "",
        grade_name: "",
      },
      show: true,
    };
  },
  created() {
    this.getAllScoreList();
    this.getGradeList();
    this.getClassList();
  },
  methods: {
    //获取年级下拉列表
    getGradeList() {
      apiGetGradeList().then((res) => {
        console.log(res);
        this.gradeList = res.data.map((item) => {
          return {
            name: item.grade_name,
            value: item.grade_id,
          };
        });
      });
    },
    //获取班级列表下拉框
    getClassList() {
      apiGetClassList().then((res) => {
        console.log(res);
        this.classList = res.data.map((item) => {
          return {
            name: item.class_name,
            value: item.class_id,
          };
        });
      });
    },
    //初始化所有学生成绩数据
    getAllScoreList(data) {
      if (!data) {
        data = {
          pageNum: 1,
          pageSize: 10,
        };
      }
      apiStudentListPage({
        pageNum: data?.pageNum,
        pageSize: data?.pageSize,
        ...this.form,
      }).then((res) => {
        this.datalist = res.data.data;
        this.pagination = {
          ...this.pagination,
          total: res.data.total,
          currentPage: data?.currentPage || 1,
        };
      });
    },
    //监听分页器页码变化的，在接收到新的页码后，会执行搜索请求并更新表格数据。
    pageChange(data) {
      this.pagination = data;
      this.getAllScoreList({
        ...data,
        pageNum: data.currentPage,
        pageSize: data.pageSize,
      });
    },
    //监听表格选中的行数据，将选中的行数据保存在"checkList"数组中。
    checkBox(data) {
      this.checkList = data;
    },
    //筛选
    handleSubmit() {
      console.log(this.form);
      this.getAllScoreList();
    },
    //清除
    handleClear() {
      this.form = {
        name: "",
        class: "",
      };
    },
    //新增保存
    handleAdd() {
      console.log(this.formData);
    },
    //导出
    handleExport() {},
    //编辑
    handleEdit() {},
  },
};
</script>

<style lang="scss" scoped>
.invigilate {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;

    .btn button {
      margin: 0 5px;
    }
    .operate {
      width: 100%;
    }
  }
  .body {
    width: 100%;
  }
}

.operate button {
  margin: 0 5px 10px 0;
}

::v-deep .el-form-item {
  width: 50%;
}
</style>
